<template>
  <div class="fixed" v-dialogDrag>
    <div class="content el-dialog"
         style="padding:0">
      <div class="msgTop el-dialog__header">
        <span>批量处理</span>
        <i class="el-icon-close fr"
           style="cursor:pointer;line-height:40px;font-size:13px;"
           @click="cancelTransfer"></i>
      </div>
      <el-form :model="formInfo"
               ref="formInfo"
               :rules="rulesForms"
               class="demo-ruleForm"
               style="padding:20px 20px 0 20px">
        <el-form-item label="节点选择"
                      label-width="100px"
                      prop="nodeVal">
          <el-select v-model="formInfo.nodeVal"
                     placeholder="请选择节点"
                     clearable>
            <el-option v-for="item in forms.nodes"
                       :key="item.nodeId"
                       :label="item.nodeName"
                       :value="item.nodeId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分配模式"
                      label-width="100px">
          <el-radio v-model="radio"
                    label="1">工单池模式</el-radio>
          <el-radio v-model="radio"
                    label="2">按人依次分配</el-radio>
        </el-form-item>
        <el-form-item label="转移给"
                      label-width="100px"
                      prop="userValue">
          <el-select multiple
                     default-first-option
                     v-model="formInfo.userValue"
                     filterable
                     placeholder="请添加用户">
            <el-option v-for="item in forms.userOptions"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <node-form :jsonData="jsonData"
                     ref="nodeForm"
                     @sendmsg='getMessage'></node-form>
        </el-form-item>
        <el-form-item label-width="10px"
                      class="center">
          <el-button @click="submitForm('formInfo')"
                     type="button"
                     class="el-button el-button--primary el-button--medium h30Btn ">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { batchProcessWorkOrder } from '@/api/workOrderController'
import nodeForm from '@/components/common/nodeForm'
export default {
  inject: ['reload'], // 引入页面同步刷新的依赖
  props: ['jsonData', 'forms', 'buttonInfo', 'nodeContent'],
  data () {
    return {
      nodeShow: false,
      getMessageInfo: '',
      radio: '1',
      formInfo: {
        nodeVal: this.forms.nodeVal, // 流程节点
        userValue: [] // 转派用户
      },
      rulesForms: {
        nodeVal: [{ required: true, message: '请选择节点', trigger: ['blur', 'change'] }],
        userValue: [{ required: true, message: '请选择用户', trigger: ['blur', 'change'] }]
      }
    }
  },

  watch: {
    // getJsonDatas(n, o) {
    //   this.jsonData = n
    // },
  },
  components: {
    nodeForm
  },
  mounted () {
  },
  methods: {
    // 触发父组件关闭批量的弹框
    cancelTransfer () {
      this.$emit('batchTransferShow', false)
    },
    // 获取表单的数据
    getMessage (data) {
      this.getMessageInfo = data
    },
    // 提交
    async submitForm (formName) {
      if (this.$refs.nodeForm) {
        await this.$refs.nodeForm.change()
      }
      this.workOrderIdList = JSON.parse(sessionStorage.getItem('workOrderIdList'))
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            userId: this.$store.state.userId, // 当前坐席
            workOrderIds: this.workOrderIdList, // 工单列表
            writeFormTemplateInputDto: {
              'content': this.getMessageInfo.content, // 数据模板
              'modelValue': this.getMessageInfo.modelValue, // 模板数据选中的值
              'nodeId': this.buttonInfo.sourceRef, // 当前节点id
              'nodeName': this.nodeContent.nodeName // 当前节点name
            },
            redeploy: {
              roleType: '用户',
              targetNodeId: this.formInfo.nodeVal, // 转派的节点
              value: this.formInfo.userValue || [] // 转派的用户列表
            },
            opration: this.buttonInfo// 按钮信息
          }
          // 调取接口处
          batchProcessWorkOrder(params).then(res => {
            if (res.data.retCode === 200) {
              this.$message({
                message: res.data.msg,
                type: 'success'
              })
              this.$emit('batchShow', false)
              this.reload() // 直接调用页面同步刷新的方法
            } else {
              this.$message({
                message: res.data.msg,
                type: 'error'
              })
              this.$emit('batchShow', false)
              this.reload() // 直接调用页面同步刷新的方法
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.center {
  text-align: center;
  font-size: 16px;
}

/* .confirm {
  padding: 0px 40px !important;
  height: 40px;
  line-height: 40px;
} */

.paging-foot {
  padding: 10px 0;
}


</style>
